<template>
  <view>
    <uni-popup ref="popup" :type="position" @maskClick="hideClose ? close() :() =>{}" :mask-click="false" :safe-area="false" mask-background-color="rgba(0,0,0,0.7)">
      <template v-if="common.popupType != 'close'">

        <image :src="closeIconUrl" mode="widthFix" class="popup-close" :style="{width: iconWidth}" @click="close" v-if="!hideClose" />
        <template v-if="common.popupType == 'share'">
          <share-card></share-card>
        </template>
        <template v-else-if="common.popupType == 'contact'">
          <contact-card></contact-card>
        </template>
        <template v-else-if="common.popupType == 'serve'">
          <serve-card></serve-card>
        </template>
        <template v-else-if="common.popupType == 'skill'">
          <skill-card></skill-card>
        </template>
        <template v-else-if="common.popupType == 'photo'">
          <photo-card></photo-card>
        </template>
        <template v-else-if="common.popupType == 'muban'">
          <muban-card></muban-card>
        </template>
        <template v-else-if="common.popupType == 'prompt'">
          <prompt-card></prompt-card>
        </template>
        <template v-else-if="common.popupType == 'purchase'">
          <purchase-card></purchase-card>
        </template>
        <template v-else-if="common.popupType == 'notice'">
          <notice-card></notice-card>
        </template>
        <template v-else-if="common.popupType == 'gift'">
          <gift-card></gift-card>
        </template>
        <template v-else-if="common.popupType == 'submit'">
          <submit-card></submit-card>
        </template>
        <template v-else-if="common.popupType == 'apply'">
          <apply-card></apply-card>
        </template>
        <template v-else>
          <slot></slot>
        </template>
      </template>
    </uni-popup>
  </view>
</template>

<script setup>
// 引入组件
import ContactCard from "./common/contact-card.vue";
import ServeCard from "./common/serve-card.vue";
import ShareCard from "./common/share-card.vue";
import SkillCard from "./common/skill-card.vue";
import PhotoCard from "./common/photo-card.vue";
import MubanCard from "./common/muban-card.vue";
import PromptCard from "./common/prompt-card.vue";
import PurchaseCard from "./common/purchase-card.vue";
import NoticeCard from "./common/notice-card.vue";
import GiftCard from "./common/gift-card.vue";

import SubmitCard from "./settings/submit-card.vue";
import ApplyCard from "./settings/apply-card.vue";

import closeIcon from "@/static/common/close.svg";
import bCloseIcon from "@/static/common/b-close.svg";

// 引入api
import useStore from "@/store";
const { common, app } = useStore();
const props = defineProps({
  showClose: {
    type: Boolean,
    default: true,
  },
});

const hideClose = computed(() => {
  const types = ["share", "photo", "purchase", "muban"];
  return types.includes(common.popupType);
});
const position = computed(() => {
  const types = ["share", "serve", "search", "apply", "complete", "muban"];
  return types.includes(common.popupType) ? "bottom" : "center";
});
const closeIconUrl = computed(() => {
  const types = ["notice"];
  return types.includes(common.popupType) ? bCloseIcon : closeIcon;
});
const iconWidth = computed(() => {
  const types = ["notice"];
  return types.includes(common.popupType) ? "40rpx" : "60rpx";
});
const popup = ref();

watch(
  () => common.isPopupOpen,
  (v) => {
    const len = getCurrentPages()?.length;
    const path = getCurrentPages()[len - 1].route;
    const fPage = !path.includes("signout");

    if (v) {
      if (len == 1 && fPage) uni.hideTabBar();
      popup.value.open();
    } else {
      if (len == 1 && fPage) uni.showTabBar();

      if (common.popupType == "gift") {
        common.updateGiftStatus(false);
        uni.removeStorageSync("initGiftStatus");
      }
      
      popup.value.close();
    }
  }
);

const close = () => {
  const flag = common.isDisabled;
  if (flag) return;
  common.updatePopupDisabled(false);
  common.updatePopupOpen(false, common.popupType);
  if(common.popupType == 'close'){
    common.updatePopupOpen(false, 'other');
  }
};
</script>

<style lang=scss scoped>
.popup-close {
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  right: 40rpx;
  top: 40rpx;
  z-index: 999;
}
</style>